<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>06个人简历练习</title>
</head>

<body>
    <table border="1px">
        <caption>个人简历</caption>
        <tr>
            <td>照片:</td>
            <td><span id="url"></span></td>
        </tr>
        <tr>
            <td>姓名:</td>
            <td><span id="name"></span></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><span id="age"></span></td>
        </tr>
        <tr>
            <td>好友</td>
            <td><span id="friends"></span></td>
        </tr>
    </table>

    <script>
        let person = {
            name: '传奇哥',
            age: 18,
            friends: ['路飞', '索隆', '娜美', '张飞'],
            imgUrl: 'img/fcq.jpg'
        }
        let url_Td = document.getElementById('url');
        let imgEl = document.createElement('img');
        imgEl.src = person.imgUrl;
        imgEl.width = 100;
        url_Td.append(imgEl);

        document.getElementById('name').innerHTML = person.name;

        var age1 = parseInt(person.age);
        document.getElementById('age').innerHTML = age1

        let friends = document.getElementById('friends');
        let ul = document.createElement('ul');
        for (let fName of person.friends) {
            let li = document.createElement('li');
            li.innerHTML = fName
            ul.append(li);
        }
        friends.append(ul);


    </script>
</body>

</html>